<!--dynamicTable动态表格方案-->

<!-- 方案1 prop key v-model为中文汉字方案 -->
<!--<template>-->
<!--  <div class="app-container">-->
<!--    &lt;!&ndash; 部位选择下拉框，支持多选 &ndash;&gt;-->
<!--    <el-select-->
<!--      v-model="selectedParts"-->
<!--      multiple-->
<!--      placeholder="请选择部位"-->
<!--      @change="updateColumns"-->
<!--      style="width: 200px"-->
<!--    >-->
<!--      &lt;!&ndash; 循环渲染每个可选的部位选项 &ndash;&gt;-->
<!--      <el-option-->
<!--        v-for="part in parts"-->
<!--        :key="part"-->
<!--        :label="part"-->
<!--        :value="part"-->
<!--      ></el-option>-->
<!--    </el-select>-->
<!--    &lt;!&ndash; 展示表格，数据绑定到 tableData &ndash;&gt;-->
<!--    <el-table :data="tableData" border style="width: 100%">-->
<!--      &lt;!&ndash; 固定列，显示尺码信息，不可编辑 &ndash;&gt;-->
<!--      <el-table-column prop="size" label="尺码" fixed></el-table-column>-->
<!--      &lt;!&ndash; 动态列，根据用户选择的部位生成 &ndash;&gt;-->
<!--      <el-table-column v-for="column in columns" :key="column" :prop="column" :label="column">-->
<!--        &lt;!&ndash; 每个单元格使用输入框，可输入值 &ndash;&gt;-->
<!--        <template slot-scope="scope">-->
<!--          <el-input v-model="scope.row[column]" size="small"></el-input>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    &lt;!&ndash; 点击按钮触发导出 JSON 操作 &ndash;&gt;-->
<!--    <el-button @click="exportToJson">导出为 JSON</el-button>-->
<!--    &lt;!&ndash; 当 jsonOutput 有值时，以格式化的方式展示生成的 JSON 数据 &ndash;&gt;-->
<!--    <pre v-if="jsonOutput">{{ jsonOutput }}</pre>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import ElementUI from 'element-ui';-->
<!--import 'element-ui/lib/theme-chalk/index.css';-->

<!--export default {-->
<!--  // 注册 Element UI 组件-->
<!--  components: {-->
<!--    ...ElementUI-->
<!--  },-->
<!--  // 组件接收的属性，这里为空-->
<!--  props: {},-->
<!--  // 组件的数据状态-->
<!--  data() {-->
<!--    return {-->
<!--      // 尺码信息数组，模拟后端返回的数据-->
<!--      sizes: ['S', 'M', 'L', 'XL'],-->
<!--      // 部位信息数组，模拟后端返回的数据-->
<!--      parts: ['胸围', '腰围', '臀围', '肩宽'],-->
<!--      // 用户选择的部位数组-->
<!--      selectedParts: [],-->
<!--      // 表格的列名数组-->
<!--      columns: [],-->
<!--      // 表格的数据数组-->
<!--      tableData: [],-->
<!--      // 存储生成的 JSON 字符串-->
<!--      jsonOutput: ''-->
<!--    };-->
<!--  },-->
<!--  // 计算属性，这里为空-->
<!--  computed: {},-->
<!--  // 监听器，这里为空-->
<!--  watch: {},-->
<!--  // 组件的方法-->
<!--  methods: {-->
<!--    // 初始化表格数据-->
<!--    initTableData() {-->
<!--      this.tableData = this.sizes.map(size => {-->
<!--        const row = { size };-->
<!--        this.parts.forEach(part => {-->
<!--          row[part] = '';-->
<!--        });-->
<!--        return row;-->
<!--      });-->
<!--    },-->

<!--    // 更新表格列名-->
<!--    updateColumns() {-->
<!--      this.columns = this.selectedParts;-->
<!--    },-->

<!--    // 导出表格数据为 JSON 字符串-->
<!--    exportToJson() {-->
<!--      // 构建表头数组，包含固定的“尺码”和用户选择的部位-->
<!--      const headers = ['尺码', ...this.columns];-->
<!--      // 处理表格数据，只保留表头对应的数据-->
<!--      const data = this.tableData.map(row => {-->
<!--        const newRow = {};-->
<!--        headers.forEach(header => {-->
<!--          newRow[header] = row[header];-->
<!--        });-->
<!--        return newRow;-->
<!--      });-->
<!--      // 组合表头和数据为一个对象-->
<!--      const tableObject = {-->
<!--        headers,-->
<!--        data-->
<!--      };-->
<!--      // 将对象转换为格式化的 JSON 字符串-->
<!--      this.jsonOutput = JSON.stringify(tableObject, null, 2);-->
<!--    }-->
<!--  },-->
<!--  // 组件创建完成后执行的钩子函数，初始化表格数据-->
<!--  created() {-->
<!--    this.initTableData();-->
<!--  },-->
<!--  // 组件挂载完成后执行的钩子函数，这里为空-->
<!--  mounted() {},-->
<!--  // 组件创建前执行的钩子函数，这里为空-->
<!--  beforeCreate() {},-->
<!--  // 组件挂载前执行的钩子函数，这里为空-->
<!--  beforeMount() {},-->
<!--  // 组件更新前执行的钩子函数，这里为空-->
<!--  beforeUpdate() {},-->
<!--  // 组件更新后执行的钩子函数，这里为空-->
<!--  updated() {},-->
<!--  // 组件销毁前执行的钩子函数，这里为空-->
<!--  beforeDestroy() {},-->
<!--  // 组件销毁后执行的钩子函数，这里为空-->
<!--  destroyed() {},-->
<!--  // 组件被激活时执行的钩子函数（如果使用了 keep-alive），这里为空-->
<!--  activated() {}-->
<!--};-->
<!--</script>-->
<!--<style scoped>-->
<!--/* 可以添加自定义样式 */-->
<!--</style>-->

<!-- 方案2 prop key v-model为英文单词方案 -->
<template>
  <!-- 应用容器 -->
  <div class="app-container">

    <!-- Element UI 的下拉选择框，支持多选 -->
    <!-- 绑定用户选择的部位到 selectedParts 数组 -->
    <!-- 开启多选功能 -->
    <!-- 选择框的占位提示文本 -->
    <!-- 选择发生变化时调用 updateColumns 方法 -->
    <!-- 设置选择框的宽度 -->
    <el-select
      v-model="selectedParts"
      multiple
      placeholder="请选择部位"
      @change="updateColumns"
      style="width: 200px"
    >
      <!-- 循环渲染每个可选的部位选项 -->
      <!-- 遍历 parts 数组 -->
      <!-- 为每个选项设置唯一的 key -->
      <!-- 选项的显示文本 -->
      <!-- 选项的值 -->
      <el-option
        v-for="part in parts"
        :key="part"
        :label="part"
        :value="part"></el-option>
    </el-select>

    <!-- Element UI 的表格组件，用于展示表格数据 -->
    <!-- 绑定表格数据到 tableData 数组 -->
    <!-- 显示表格边框 -->
    <!-- 设置表格宽度为 100% -->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!-- 固定列，显示尺码信息，不可编辑 -->
      <!-- 绑定该列的数据字段为 size -->
      <!-- 列的表头标签 -->
      <!-- 设置该列为固定列 -->
      <el-table-column
        prop="size"
        label="尺码"
        fixed>
      </el-table-column>

      <!-- 动态列，根据用户选择的部位生成 -->
      <!-- 遍历 columns 数组 -->
      <!-- 为每列设置唯一的英文 key -->
      <!-- 绑定该列的数据字段为对应的英文映射 -->
      <!-- 列的表头标签为中文部位名称 -->
      <el-table-column
        v-for="(column, index) in columns"
        :key="columnEnMap[column]"
        :prop="columnEnMap[column]"
        :label="column"
      >
        <!-- 定义表格单元格的内容 -->
        <!-- slot-scope="scope" 是 Vue 2 里用于接收表格行数据的语法，scope 为一个对象，涵盖了当前行的数据、索引等信息。-->
        <!-- Element UI 的输入框，用于在单元格中输入数据 -->
        <!-- 绑定输入框的值到当前行对应英文映射字段 -->
        <!-- 设置输入框的尺寸为小 -->
        <template slot-scope="scope">
          <el-input
            v-model="scope.row[columnEnMap[column]]"
            size="small">
          </el-input>
        </template>
      </el-table-column>
    </el-table>

    <!-- Element UI 的按钮，点击触发导出 JSON 操作 -->
    <el-button @click="exportToJson">导出为 JSON</el-button>

    <!-- 当 jsonOutput 有值时，以预格式化的方式展示生成的 JSON 数据 -->
    <pre v-if="jsonOutput">{{ jsonOutput }}</pre>
  </div>
</template>

<script>
export default {
  // 组件接收的属性，这里为空
  props: {},

  // 组件的数据状态
  data() {
    return {
      // 尺码信息数组，模拟后端返回的数据
      sizes: ['S', 'M', 'L', 'XL'],

      // 部位信息数组，模拟后端返回的数据
      parts: ['胸围', '腰围', '臀围', '肩宽'],

      // 用户选择的部位数组
      selectedParts: [],

      // 表格的列名数组（中文）
      columns: [],

      // 表格的数据数组
      tableData: [],

      // 存储生成的 JSON 字符串
      jsonOutput: '',

      // 中文部位名称到英文的映射对象
      columnEnMap: {
        '胸围': 'bust',
        '腰围': 'waist',
        '臀围': 'hip',
        '肩宽': 'shoulderWidth'
      }
    };
  },

  // 计算属性，这里为空
  computed: {},

  // 监听器，这里为空
  watch: {},

  // 组件的方法
  methods: {
    // 初始化表格数据
    initTableData() {
      this.tableData = this.sizes.map(size => {
        const row = {size};

        // 为每行数据初始化每个部位对应英文映射字段的值为空字符串
        this.parts.forEach(part => {
          row[this.columnEnMap[part]] = '';
        });

        return row;
      });
    },

    // 更新表格列名
    updateColumns() {
      this.columns = this.selectedParts;
    },

    // 导出表格数据为 JSON 字符串
    exportToJson() {
      // 构建表头数组，包含固定的“尺码”和用户选择的中文部位
      const headers = ['尺码', ...this.columns];

      console.log('表格数据=============',this.tableData)

      // 处理表格数据，只保留表头对应的数据,逐行循环处理
      const data = this.tableData.map(row => {
        const newRow = {'size': row.size};

        // 遍历用户选择的中文部位，将对应英文映射字段的值添加到新行对象中
        this.columns.forEach(column => {
          newRow[this.columnEnMap[column]] = row[this.columnEnMap[column]];
        });

        return newRow;
      });

      // 组合表头和数据为一个对象
      const tableObject = {
        headers,
        data
      };

      // 将对象转换为格式化的 JSON 字符串
      this.jsonOutput = JSON.stringify(tableObject, null, 2);
    }
  },

  // 组件创建完成后执行的钩子函数，初始化表格数据
  created() {
    this.initTableData();
  },

  // 组件挂载完成后执行的钩子函数，这里为空
  mounted() {
  },

  // 组件创建前执行的钩子函数，这里为空
  beforeCreate() {
  },

  // 组件挂载前执行的钩子函数，这里为空
  beforeMount() {
  },

  // 组件更新前执行的钩子函数，这里为空
  beforeUpdate() {
  },

  // 组件更新后执行的钩子函数，这里为空
  updated() {
  },

  // 组件销毁前执行的钩子函数，这里为空
  beforeDestroy() {
  },

  // 组件销毁后执行的钩子函数，这里为空
  destroyed() {
  },

  // 组件被激活时执行的钩子函数（如果使用了 keep-alive），这里为空
  activated() {
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>

